﻿@model Event

@{
    ViewBag.Title = Model.Title;
}

<div id="client-details" class="twelve columns">
    
    <div class="row">
        <div class="two columns mobile-four text-center ">
            <h1 class="event-icon hide-for-small"><i class="icon-calendar"></i></h1>
        </div>
        <div class="seven columns">
            <h2>@Model.Title</h2>
            <h5>@ViewBag.RelativeDate at @Model.StartDate.ToShortTimeString()</h5>
        </div>
        <div class="three column mobile-four right">
            <div class="row">
                <span class="six column mobile-four text-right">
                     @Html.ActionLink("Edit", "Edit", new { id = Model.EventID }, new { @class = "button secondary radius" })
                </span>
               
                <span id="form-container" class="mobile-four six column">
                    @using (Html.BeginForm("Delete", "Event", new { id = Model.EventID }, FormMethod.Post))
                    {
                        <input type="submit" class="button alert radius" value="Delete" />
                    }
                </span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="card card-blue five column">
            <h5>Details</h5>

            <div class="form-row text-center"><strong style="font-size: 18px;">Client</strong></div>
            <div class="form-row row" style="border: 0;">
                <h5 class="twelve mobile-four column">
                    <img src="@string.Format(@"http://www.gravatar.com/avatar/{0}?s={1}&d=identicon", ViewBag.Gravatar, 35)" style="position: absolute; top: -5px;">
                    @Html.ActionLink(Model.Client.FirstName + " " + Model.Client.LastName, "Details", "Client", new { id = Model.Client.ClientID }, new { style = "padding-left: 52px; font-size: 16px;" })
                </h5>
            </div>

            <br>
            <div class="form-row text-center"><strong style="font-size: 18px;">Event Date</strong></div>
                    
            <div class="form-row row" style="border: 0;">
                <h5 class="four mobile-four column"><strong>Start:</strong></h5>
                <h5 class="eight mobile-four column">@Model.StartDate.ToLongDateString() <br>at @Model.StartDate.ToShortTimeString()</h5>
            </div>

            <div class="form-row row" style="border: 0;">
                <h5 class="four mobile-four column"><strong>End:</strong></h5>
                <h5 class="eight mobile-four column">@Model.EndDate.ToLongDateString() <br>at @Model.EndDate.ToShortTimeString()</h5>
            </div>

            <div class="form-row row" style="border: 0;">
                <h5 class="four mobile-four column"><strong>Type:</strong></h5>
                <h5 class="eight mobile-four column">@Model.EventType.EventTypeName</h5>
            </div>

            <br>
            <div class="form-row text-center"><strong style="font-size: 18px;">Services</strong></div>

            @if (Model.Coordination.HasValue ? Model.Coordination.Value : false)
            {
                <div class="form-row row" style="border: 0;">
                    <h5 class="five mobile-four column"><strong>Coordination:</strong></h5>
                    <h5 class="seven mobile-four column">@Model.Package.PackageType Package</h5>
                </div>
            }

            @if (Model.Flowers.HasValue ? Model.Flowers.Value : false)
            {
                <div class="form-row row" style="border: 0;">
                    <h5 class="five mobile-four column"><strong>Flowers:</strong></h5>
                    <h5 class="seven mobile-four column">@Model.FlowersBudget.Value.ToString("c")</h5>
                </div>
            }

            @if (Model.Decor.HasValue ? Model.Decor.Value : false)
            {
                <div class="form-row row" style="border: 0;">
                    <h5 class="five mobile-four column"><strong>Decor:</strong></h5>
                    <h5 class="seven mobile-four column">@Model.DecorBudget.Value.ToString("c")</h5>
                </div>
            }
            
        </div>

        <div class="six column">
            <div class="row">
                <div class="twelve column card card-blue">
                    <h5>Invoice</h5>

                    @if (Model.Invoices.Count() > 0)
	                {
                        foreach (var invoice in Model.Invoices)
                        {
                            decimal total = WeddingEventManagementApp.Utility.CalculateInvoiceTotal(invoice);
                        
                            <h4 class="text-right" style="border-bottom: 1px dashed #aaa; padding-bottom: 5px; margin-bottom: 20px;"><span class="left"><a href="@Url.Action("Index", "Invoice", new { id = invoice.InvoiceID } )">#@invoice.InvoiceID</a></span> @total.ToString("c")</h4>
                            
                            if (invoice.Payments.Count() > 0)
                            {
                                foreach (var payment in invoice.Payments)
                                {
                                    total -= payment.Amount;
                                    <h5 class="text-right" style="color: #777;"><span class="left">@payment.DateTime.ToShortDateString() - @payment.PaymentType</span>@payment.Amount.ToString("c")</h5>
                                }
                            }
                            else
                            {
                                <h5 class="text-right" style="color: #777;">No payments added yet</h5>
                            }
                            <h4 class="text-right" style="border-top: 1px dashed #aaa; padding-top: 5px;"><span class="left">Balance</span><span style="color: #2DAA3D">@total.ToString("c")</span></h4>
                            
                            if(total > 0)
                            {
                                <a data-reveal-id="add-payment" 
                                    href="#" 
                                    data-client-id="@invoice.Event.ClientID"
                                    data-invoice-id="@invoice.InvoiceID"
                                    data-event-name="@invoice.Event.Title"
                                    class="k-button k-button-icontext addPaymentBtn">Add Payment</a>
                            }
                        }
	                }
                    else
                    {
                        @Html.ActionLink("Create Invoice", "Create", "Invoice", new { id = Model.EventID }, new { @class = "button" })
                    }
                    
                </div>
            </div>

            <div class="row">
                <div class="twelve column card card-blue" style="margin-bottom: 0;">
                    <h5>Agenda</h5>
                    <div id="add-button-dropdown" class="dropdown button secondary" style="position: absolute; top: 9px; right: 9px; padding: 4px 8px; height: auto">
                        <i class="icon-plus-2"></i>
                        <ul class="no-hover">
                            <li>@Html.ActionLink("Add New Location", "NewLocation", new { id = Model.EventID })</li>
                            <li>@Html.ActionLink("Add Existing Location", "ExistingLocation", new { id = Model.EventID })</li>
                        </ul>
                    </div>
                    <h4 style="text-align: center;">@Model.StartDate.ToLongDateString()</h4>
                    <h5 style="margin-bottom: 0; text-align: center;">Start: @Model.StartDate.ToShortTimeString()</h5>
                </div>
            </div>
            @if (Model.EventLocations != null && Model.EventLocations.Count > 0)
            {
                List<EventLocation> evls = Model.EventLocations.OrderBy(i => i.Time.Value).ToList();
                foreach(var loc in evls)
                {
                    <div class="timeline-entry"><em>@loc.Time.Value.ToShortTimeString()</em></div>
                    <div class="row agenda-item" data-lat="@loc.Location.Lat" data-lng="@loc.Location.Lng" data-name="@loc.Location.Name">
                        <div class="card card-blue">
                            <h5 style="margin-bottom: 10px;">@loc.LocationType <span class="right">@Html.ActionLink("Edit", "EditEventLocation", new { evtID = loc.EventID, locID = loc.LocationID})</span></h5>
                            <a href="@Url.Action("Details", "Location", new { id= loc.LocationID } )"><strong style="padding-bottom: 5px; display: block;">@loc.Location.Name</strong>
                             </a>
                                <address> @loc.Location.StreetAddress <br>
                                @loc.Location.City, @loc.Location.Province @loc.Location.PostalCode</address>
                           
                            <br>
                            <div class="location-map" style="height: 200px; width: 100%"></div>
                            <br>
                            <div class="notes">
                                @loc.Notes
                            </div>
                        </div>
                    </div>
                }
            }
            else
            {
                <div class="form-row row">
                    <p>No Agenda items have been added for this Event</p>
                </div>
            }
            </div>
        </div>
</div>



@section Scripts {
    <div id="add-payment" class="reveal-modal">
        @{Html.RenderPartial("_AddPayment", new WeddingEventManagementApp.Models.Payment_VM() { EventID = Model.EventID });}
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <div id="view-payments" class="reveal-modal">
        <h3>Payments for <span id="view-pay-evt-title"></span></h3>

        <div id="view-payments-content">
            <table>
                <thead>
                    <tr>
                        <th>Amount</th>
                        <th>Type</th>
                        <th>Creator</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id='viewPaymentsTBody'>
                    <tr>
                        <th>No Payments Have Been Made</th>
                    </tr>
                </tbody>
            </table>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="~/Scripts/gmaps.js"></script>
    <script type="text/javascript">
        var maps = [];

        $(document).ready(function () {
            //confirm delete
            $('#form-container > form').submit(function (e) {
                var r = confirm("Are you sure you want to delete this event?");
                if (r === false) {
                    e.preventDefault();
                }
            });

            $("#paymentDate").kendoDatePicker({
                animation: {
                    open: {
                        effects: "fadeIn",
                        duration: 300,
                        show: true
                    }
                },
                value: new Date(Date.now())
            });

            $("#paymentType").kendoComboBox({
                dataTextField: "type",
                dataValueField: "type",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Invoice/GetPaymentTypesJson"
                    }
                })
            });

            $('.agenda-item').each(function () {
                var lat = $(this).data('lat');
                var lng = $(this).data('lng');
                var name = $(this).data('name');

                var map = new GMaps({
                    div: $(this).find('.location-map')[0],
                    zoom: 16,
                    lat: lat,
                    lng: lng,
                    disableDefaultUI: true,
                });

                map.addMarker({
                    title: name,
                    lat: lat,
                    lng: lng
                });
            });

            $('.addPaymentBtn').click(function () {
                var invoiceID = $(this).data("invoice-id");
                document.getElementById("invoice-id-hdn").value = invoiceID;

                var clientID = $(this).data("client-id");
                document.getElementById("client-id-hdn").value = clientID;

                $('#modal-event-name').html($(this).data('event-name'));
            });
        });
    </script>
}
